<template>
	<view :class="lang">
		<u-navbar :is-fixed="true" :title="$t('feedbacks.意见反馈')" back-icon-name="arrow-leftward" background="#ffffff"></u-navbar>

		<view class="feedcon" :class="lang + 'layout'">
			<view class="feedcontitle font-25">
				<text>{{ $t('feedbacks.问题和意见') }}</text>
			</view>
			<view class="feedtexture font-25">
				<textarea @blur="contenTextChange" name="content" :placeholder="$t('feedbacks.请简要描述您的问题和意见')" placeholder-style="color:#c3c3c3"></textarea>
			</view>
			<view class="clearfloat"></view>
			<view class="feedbutton" v-if="feedtype == 1">
				<text class="font-25">{{ $t('feedbacks.当前题目') }}</text>
				<text class="font-25">{{langname}}/{{carttype}}/{{kaolx}}/{{kemutype}}/{{tid}}</text>
			</view>
			<view class="feedup"  v-if="feedtype == 1">
				<view class="feedupbutton">
					<view class="feedupbuttonview font-25">
						<text>{{ $t('feedbacks.题目截图') }}</text>
					</view>
				</view>
				<view class="feeduppic">
					<view class="pre-box">
						<view class="pre-item" v-for="(item, index) in images" :key="index">
							<image class="slot-btn" :src="item" mode="aspectFill"></image>
							<input name="file" style="display: none;" :value="item" />
							<!-- <view class="pre-text">{{ $t('feedbacks.自动获取') }}</view> -->
							<view class="pre-text">完成</view>
						</view>
						<view class="pre-item">
							<u-upload
								@on-success="imgsuccess"
								source-type="album"
								:max-size="2 * 1024 * 1024"
								max-count="3"
								:custom-btn="true"
								ref="uUpload"
								to-json="true"
								:show-upload-list="showUploadList"
								:action="action"
								:upload-text="$t('feedbacks.手动添加')"
							>
								<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
									<view class="uppicicon"><u-icon name="plus" size="60" color="#5f5f5f"></u-icon></view>
									<view class="uptext">
										<text>{{ $t('feedbacks.手动添加') }}</text>
									</view>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			<view class="feedphone">
				<input
					name="telphone"
					@input="phonenum"
					class="feedphoneview  font-25"
					:placeholder-class="lang"
					:class="lang"
					:placeholder="$t('feedbacks.联系电话')"
					placeholder-style="color:#c3c3c3"
				/>
			</view>
			<view class="feedphone">
				<button @click="formSubmit()" class="feedsubimt">
					<text>{{ $t('feedbacks.提交') }}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import {
	yijian_api, //版本信息
	upimages_api, //上传图片
	upimgurl,
	upurl
} from '@/api/index';

import { checkMobile } from '@/common/new_tools';
import { getCarType, getArrEqual, getArrload,kemuname,langname } from '../../common/savetool.js';
export default {
	data() {
		return {
			lang: this.$i18n.locale,
			ceshiData: [],
			// 演示地址，请勿直接使用
			action: upimgurl,
			showUploadList: false,
			fileList: [
				{
					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg'
				}
			],
			images: [],
			images_url:[],
			content: '',
			phone: '',
			feedtype:1,
			tid:null,
			title:null,
			type:null,
			kemutype:null,		//科目类型
			carttype:null,		//车类型
			langname:null,		//语言名称
			kaolx:null			//准考类型
		};
	},

	mounted() {
		// 微信小程序加载默认数据示例
		// #ifdef MP-WEIXIN
		this.$nextTick(() => {
			this.$refs['eupload'] && this.$refs['eupload'].loadImagePreview(this.defaultImageList);
		});
		// #endif
	},
	onLoad(options) {
		var that = this;
		var feedtype = options.fankuitype;
		that.feedtype = feedtype;
		that.tid = options.tid;
		that.title=options.title;
		that.type=options.type;
		
		//题库意见反馈
		if(feedtype == 1){
			// lang_key
			var senlang = uni.getStorageSync('lang_key');
			that.langname = langname(senlang);
			// kemu_type
			var senkemu = uni.getStorageSync('kemu_type');
			that.kemutype = kemuname(senkemu);
			//cart_type
			var sencart = uni.getStorageSync('cart_type');
			that.carttype = sencart;
			that.kaolx = getCarType(sencart);
			
			
		}
		
	},
	methods: {
		
		//获取内容
		contenTextChange: function(e) {
			console.log(e);
			console.log(e.detail.value);
			var that = this;
			that.content = e.detail.value;
		},
		//phonenum
		phonenum: function(e) {
			console.log(e);
			console.log(e.detail.value);
			var that = this;
			that.phone = e.detail.value;
		},
		//new
		imgsuccess: function(res) {
			console.log(res);
			var that = this;
			var img = upurl + res.files[0];
			that.images.push(img);
			that.images_url.push(res.files[0]);
		},

		formSubmit: function(e) {
			var that = this;
			var phone = that.phone;
			var content = that.content;
			console.log(phone, content);
			if (phone == '') {
				uni.showToast({ title: '手机号不能为空！', icon: 'none' });
				return;
			}
			if (!checkMobile(phone)) {
				uni.showToast({ title: '手机号格式错误！', icon: 'none' });
				return;
			}
			if(content == ''){
				uni.showToast({ title: '内容不能为空！', icon: 'none' });
				return;
			}
			if(content.length < 6){
				uni.showToast({ title: '内容不能太短！', icon: 'none' });
				return;
			}
			var data = {};
			var img = that.images_url;
			var img_str  =img.join(';');
			console.log(img_str);
			//证件类型
			// exam_type
			var exam_type = uni.getStorageSync('exam_type');
			
			var exam_num = 0;
			if (exam_type == 'zigezheng'){
				exam_num = 1;
			}else{
				exam_num = 0;
			}
			
			if(that.feedtype == 0){
				data = {
					content:content,
					phone:phone
				}
			}else{
				var tids = that.tid;
				var titles = that.title;
				
				var langname = that.langname;
				 
				
				var kemutype = that.kemutype;
				var carttype = that.carttype;
				var kaolx = that.kaolx;
				
				var titles = langname+"/"+carttype+"/"+kaolx+"/"+kemutype+"/"+tids;
				data = {
					content:content,
					phone:phone,
					images:img_str,
					tid:tids,
					title:titles,
					type:exam_num
				}
			}
			
			that.https({
				url: yijian_api,
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				data: data,
				success: res => {
					console.log(res);
				},
				fail: err => {
					console.log(err);
				}
			});
			
		},

		subit: function() {
			uni.uploadFile({
				url: 'https://jiaxiaohurmet.natapp4.cc/' + yijian_api, //
				header: {
					'Content-Type': 'multipart/form-data'
					// 'accessToken': uni.getStorageSync('token')
				},
				filePath: tempFilePaths[0],
				name: 'file',
				formData: {
					project: 'hrj',
					host: '127'
				},

				success: uploadFileRes => {}
			});
		},
		pushpics: function() {
			var that = this;
			uni.chooseImage({
				count: 3,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: function(res) {
					// 预览图片
					that.images = res.tempFilePaths;
					console.log('that.images', that.images);
				}
			});
		}
	}
};
</script>

<style>
page {
	background: #f8f8f8;
}
.feedphone {
	width: 700rpx;
	height: 100rpx;
}
.feedsubimt {
	width: 700rpx;
	height: 80rpx;
	line-height: 80rpx;
	background: #27c500;
	color: #ffffff;
	border-radius: 300rpx;
}
.feedphoneview {
	height: 80rpx;
	width: 660rpx;
	border-radius: 20rpx;
	background: #fbfbfb;
	border: solid 1rpx #e0e0e0;
	line-height: 80rpx;
	text-indent: 20rpx;
	margin-top: 15rpx;
	padding: 0 20rpx;
}
.uptext {
	width: 150rpx;
	padding-top: 50rpx;
}
.kz .uptext {
	padding-top: 20rpx !important;
}
.uy .uptext {
	padding-top: 20rpx !important;
}
.uppicicon {
	padding-top: 50rpx;
}
.slot-btn {
	width: 150rpx;
	height: 230rpx;
	display: inline-block;
	justify-content: center;
	align-items: center;
	background: #ffffff;
	border-radius: 10rpx;
	border: 1rpx solid #c5c5c5;
}

.slot-btn__hover {
	background-color: #ffffff;
}

.pre-box {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.pre-item {
	width: 150rpx;
	display: inline-block;
	border-radius: 10rpx;
	height: 240rpx;
	overflow: hidden;
	position: relative;
	margin-bottom: 20rpx;
	align-items: flex-start;
	position: relative;
}
.pre-text {
	position: absolute;
	width: 150rpx;
	bottom: 44rpx;
	left: 0rpx;
}

.pre-item-image {
	width: 50%;
	height: 140rpx;
}

.feedup {
	width: 700rpx;
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
	text-align: center;
	justify-content: left;
}
.feedupbutton {
	width: 200rpx;
	align-items: flex-start;
	display: inline-block;
}
.feeduppic {
	width: 550rpx;
	display: inline-block;
}
.feedupbuttonview {
	height: 60rpx;
	width: 180rpx;
	border-radius: 20rpx;
	background: #fbfbfb;
	border: solid 1rpx #e0e0e0;
	line-height: 40rpx;
	padding: 10rpx;
}
.feedbutton {
	height: 80rpx;
	width: 700rpx;
	border-radius: 20rpx;
	background: #fbfbfb;
	border: solid 1rpx #e0e0e0;
	line-height: 80rpx;
	text-indent: 20rpx;
	margin-top: 15rpx;
}
.feedcon {
	width: 700rpx;
	margin: 0 auto;
	height: auto;
	display: block;
	padding-top: 20rpx;
}
.feedcontitle {
	width: 700rpx;
	height: 80rpx;
	line-height: 80rpx;
}
.feedtexture {
	width: 700rpx;
}
.feedtexture textarea {
	width: 660rpx;
	border-radius: 20rpx;
	border: solid 1rpx #e0e0e0;
	padding: 20rpx;
	background: #fbfbfb;
}
</style>
